<style include="cr-shared-style shared-style">
  :host {
    display: flex;
    flex: 1 0 100%;
  }

  #listContainer {
    flex: 3;
    height: 40vh;
  }
</style>

<div class="column">
  <cr-button on-click="onAddNotificationClick_" class="internals-button">
    Add Notification
  </cr-button>
  <div class="label">
    <span class="emphasize">Note:</span> A notification should include at least
    one of Title, Text Content, and Shared Image so that it can be
    rendered in the UI. When the notification is first sent, the notification
    ID and Inline Reply ID will not be editable anymore. Sent notifications will
    have a green background. To update a notification, change the fields and
    click the Update button. To remove a notification, click the Remove button.
  </div>
</div>
<div class="column" id="listContainer">
  <template id="notificationList" is="dom-repeat"
      items="{{notificationList_}}">
    <notification-form class="notification" notification="{{item}}"
        forbidden-ids="[[sentNotificationIds_]]"
        forbidden-inline-reply-ids="[[sentInlineReplyIds_]]"
        on-remove-notification="onRemoveNotification_">
    </notification-form>
  </template>
</div>
